<template>
  <div class="room-content">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" />
    <Search
      ref="topSearch"
      class="search"
      placeholder="商品名称|商品编号|订单编号|销售订单"
      :isAdd="false"
      :isScreen="true"
      :isType="true"
      @onSearch="onSearch"
      @onScreen="onScreen"
    ></Search>
    <search-tag
      ref="SearchTag"
      @resetCategory="resetCategory"
      @getCategory="getCategory"
      v-show="showSearchTag"
    ></search-tag>
    
    <div class="serach-content">
      
      <div class="content">
        <span
          class="tapbtn"
          @click="tapChange(index)"
          v-for="(item, index) in tabList"
          :key="index"
          :class="{ active: index == active }"
          >{{ item.name }}</span
        >
      </div>
    </div>

    <!--分页列表 -->
    <pageList
      ref="pageList"
      :checkedShow="checkedShow"
      :operationTxt="operationTxt"
      :columns="columns"
      :listUrl="listUrl"
      @getCheckedValue="getCheckedValue"
      @handleList="handleList"
    />
  </div>
</template>

<script>
import Search from "@/components/search";
import SearchTag from "./SearchTag";
import Navbar from "@/components/navBar/navBar_right";
import TabBar from "@/components/TabBar";
import pageList from "@/components/pageList";
export default {
  name: "carRoomList",
  components: { Navbar, TabBar, pageList, Search, SearchTag},
  data() {
    return {
      title: "生产订单",
      rtitle: "",
      rname: "", //search
      active: '0',
      tabList: [{ name: "待派发",value:"0" }, { name: "已派发",value:"1" }],
      checkedShow: false, //列表是否支持选择
      operationTxt: "确定1", //选择按钮名称
      listUrl: "/planmgt/erpProductOrder/list", //列表接口
      columns: {
        titleKey: "code", //标题
        // subtitleKey: "description",//副标题
        content: [
          //内容
          {
            name: "承诺交期",
            key: "promiseDate",
          },
          {
            name: "生产物品",
            key: "goodsName",
          },
        ],
        labelKey: ["promiseDate", "spec"], //标签
        labelText: {promiseDate: "承诺交期：", spec: "规格："}, //标签
        operation: [
          //操作
          {
            name: "派发至车间",
            icon: require("../../assets/qd.png"),
            remarks:
              "说明是的撒的撒打算大撒的多撒点打算大撒多撒打算打算打算的的撒打算大撒",
          },
        ],
      },
      showSearchTag: false, 
      keywords: "",
      params: {
        status: 0,
      },
    };
  },
  computed: {},
  mounted() {this.searchQuery()},
  created() {},
  methods: {
    onSearch(v) {
      this.keywords = v
      console.log(this.keywords)
      this.searchQuery()
      
    },
    onScreen() {
      console.log("筛选");
      this.showSearchTag = true
      this.title="更多筛选"
    },
    resetCategory() {
      this.showSearchTag = false
      this.$refs.topSearch.value = ''
      this.keywords = ''
      this.params = {
        status: this.active
      }
      this.searchQuery()
      
    },
    getCategory(p, k) {
      this.params = p
      this.keywords = k
      this.params.status = this.active
      this.showSearchTag = false
      console.log(this.params);
      this.$refs.topSearch.value = k
      this.title="生产订单"
      this.searchQuery()
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    //列表点击事件
    handleList(id, item, type) {
      console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
    },
    // 加载列表
    getList() {
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery() {
      // 搜索条件
      let queryParam = {
        keywords: this.keywords,
        ...this.params
      };
      this.$refs.pageList.searchQuery(queryParam);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    tapChange(obj) {
      this.active = obj;
      this.params.status=this.tabList[obj].value
      this.searchQuery()
    },
    goSearch() {
      this.$router.push({ path: "/carRoomPlaneSearch" });
    },
  },
};
</script>
<style lang="scss" scoped>
.room-content {
  .serach {
    height: 0.33rem;
    background: #f2f2f6;
    border-radius: 0rem;
    margin-bottom: 0.16rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.33rem;
    padding: 0.1rem 0.12rem;
    // border: 1px solid red;
    .placeh {
      font-size: 0.16rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #888888;
      line-height: 0.23rem;
    }
    .icon {
      width: 0.15rem;
      height: 0.16rem;
    }
  }
  .serach-content {
    // height: 1.52rem;
    background: #ffffff;
    padding: 0 0.16rem 0.16rem 0.16rem;
    .content {
      display: flex;
      .tapbtn {
        // height: 0.23rem;
        // background: #1890ff;
        background: #f2f2f6;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #888888;
        line-height: 0.23rem;
        margin-right: 0.12rem;
        text-align: center;
        padding: 0.04rem 0.28rem;
        cursor: pointer;
      }
      .active {
        color: #ffffff;
        background: #1890ff;
      }
    }
  }
}
</style>